<template>
    <div class="table">
        <tableLoyout
                :columns="columns"
                :add="addUser"
                :del="delUser"
                :edit="editUser"
                rowKey="id"
                :selection="handleSelection"
                :getlist="getlist" :SelectItems="SelectItems" :formItems="formItems">
            <!--     自定义顶部操作按钮      -->
            <template v-slot:btnSlot="{getData}">
                <el-button type="primary" @click="getData">自定义查询</el-button>
            </template>
            <!--     自定义表格       -->
            <template v-slot:date="{value}">
                888888 ---- {{value.row.phone}}
            </template>
            <!--    自定义表单组件        -->
            <template v-slot:compmentT="{formData,key}">
                <el-input v-model="formData[key]"></el-input>
            </template>
        </tableLoyout>
    </div>
</template>
<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import tableLoyout from "@/components/tableLayout/tableLayout.vue";
    import {getlist,addUser,delUser,editUser} from '../api/user'
    export default defineComponent({
        name: 'table',
        components:{tableLoyout},
        setup() {
            const columns = [
                {
                    label:'序号',
                    prop:'date',
                    type:'index',
                    width:'120px',
                    align:'center'
                },
                {
                    label:'测试',
                    prop:'phone',
                    slot:'date',//插槽
                    align:'center'
                },
                {
                    label:'name',
                    prop:'username'
                }
            ]

            const SelectItems = [
                {
                    label:'测试',
                    key:'username',
                    element:'date-picker',
                    attributes:{
                        type:'daterange'
                    }
                },
                {
                    label:'选中',
                    key:'id',
                    element:'select',
                    attributes:{
                        options:[
                            {
                                label:'选项1',
                                value:1
                            },
                            {
                                label:'选项2',
                                value:2
                            }
                        ]
                    }
                }
            ]

            const validatePass = (rule: any, value: any, callback: any) => {
                if (value === '222') {
                    callback(new Error('自定义sword'))
                } else {
                    callback()
                }
            }

            const formItems = [
                {
                    label:'用户名',
                    element:'input',
                    key:'username',
                    span:24,
                    formattributes:{
                        rules:{
                            required: true,
                            message: 'Please input Activity name',
                            trigger: 'blur'
                        }
                    }
                },
                {
                    label:'密码',
                    element:'input',
                    key:'password',
                    span:12,
                    attributes:{
                        type:'password'
                    }
                },
                {
                    label:'手机号',
                    element:'input',
                    key:'phone',
                    span:12,
                    type:'number'
                },
                {
                    label:'性别',
                    element:'radio-group',
                    key:'sex',
                    span:12,
                    attributes:{
                        options:[
                            {
                                label:'选项1',
                                value:1
                            },
                            {
                                label:'选项2',
                                value:2
                            }
                        ]
                    }
                },
                {
                    label:'状态',
                    key:'status',
                    span:12,
                    element:'select',
                    attributes:{
                        options:[
                            {
                                label:'选项1',
                                value:1
                            },
                            {
                                label:'选项2',
                                value:2
                            }
                        ]
                    }
                },
                {
                    label: '时间选择',
                    key: 'dateTime',
                    span: 24,
                    element: 'date-picker',
                    attributes: {
                        type:'daterange'
                    }
                },
                {
                    label: '自定义组件',
                    key: 'email',
                    slot:'compmentT',
                    span: 24,
                    formattributes:{
                        rules:{
                            validator: validatePass,
                            trigger: 'blur',
                            required: true,
                            message: 'Please input Activity name'}
                    }
                }
            ]
            const selection = ref([])
            const handleSelection = (items:any,keys:any)=>{
                console.log(items,keys)
            }
            return {columns,SelectItems,formItems,selection,getlist,handleSelection,addUser,delUser,editUser};
        },
    });
</script>
